<template>
	<div class="farm-mainBody">
		<div class="Body" style="margin-bottom: 15px; margin-top: 15px;">
			<img :src="$store.state.imgShowRoad2 + '/file/' + FarmInfo.shopPicture" />
			<div class="framInfo">
				<h1 class="farmname">{{FarmInfo.farmName}}</h1>
				<div class="updatetime">
					<span>更新时间：</span>
					<span>{{FarmInfo.updateTime}}</span>
				</div>
				<div class="farminfo">
					<span class="line-s1">商品描述：</span>
					<span class="line-s2">{{FarmInfo.farmIntro}}</span>
				</div>
				<div class="sort">
					<span class="line-so1">分类：</span>
					<span class="line-so2">{{FarmInfo.sortContent}}</span>
				</div>
				<div class="price">
					<span class="line-pr1">价格</span>
					<span class="line-pr2">￥{{displayPrice}}&nbsp;&nbsp;{{displayUnit}}</span>
				</div>
				<div class="specification">
					<span class="line-spec">规格选择</span>
					<div class="spec-main" v-if="FarmInfo && FarmInfo.specificationBeans">
						<div class="spec-content" v-for="(item,index) in displayedSpecification" :key="index"
							:class="{ 'red-border': selectedIndex === index }" @click="changeStyle(index)">
							<div>{{item.znSpecTitle}}</div>
							<div>{{item.znSpecPrice}}元/{{item.znSpecUnit}}</div>
							<div>库存{{item.inventory}}</div>
						</div>
						<div class="spec-btm" v-if="FarmInfo.specificationBeans.length > 3 && !showAll"
							@click="toggleShowAll">查看其他规格<i class="el-icon-arrow-down"></i></div>
					</div>
				</div>
				<div class="purNumBer" v-if="isStyleChanged">
					<span class="span-pur">购买数量</span>
					<el-input-number v-model="count" @change="handleChange(displayPrice)" :min="1" :max="getMaxInventory()"
						size="small" label="描述文字"></el-input-number>
					<span class="pur-price">{{totalprice }}&nbsp;元</span>
				</div>
				<div class="elBtn">
					<div class="linne-d1"></div>
					<el-button type="danger" class="elbtn1"
						@click="BuyNow(displaySpecInfo,count,totalprice)">立即购买</el-button>
					<el-button type="danger" class="elbtn1" @click="Addcart(count,displaySpecId)">加入购物车</el-button>
					<div class="tendency" @click="postCollectFarm(FarmInfo.collectOrNot)">
						<img :src="FarmInfo.collectOrNot === true ? shoucang.hover : shoucang.default" alt="收藏" />
						<span :class="{ 'hover': FarmInfo.collectOrNot === true }">{{FarmInfo.collectCount}}</span>
					</div>
				</div>
				<div class="line-val">
					<div class="linne-d1"></div>
					<div class="tips-item">
						<div class="tips-item-t">服务承诺</div>
						<div class="tips-item-v">整车</div>
						<div class="tips-item-v">坏损包赔</div>
						<div class="tips-item-v">支持代发</div>
						<div class="tips-item-v">产地代办</div>
					</div>
					<div class="tips-item">
						<div class="tips-item-t">支付方式</div>
						<div class="tips-item-v">支付宝</div>
						<div class="tips-item-v">微信</div>
						<div class="tips-item-v">网上银行</div>
						<div class="tips-item-v">银行转账(柜台转账/网银转账)</div>
					</div>
					<div class="tips-item">
						<div class="tips-item-t">交易方式</div>
						<div class="tips-item-v">担保交易</div>
					</div>
				</div>
			</div>
		</div>
		<FarmEvaluate :FarmInfo="FarmInfo"></FarmEvaluate>
	</div>
</template>

<script>
	import farmApi from "../../api/farm.js"
	import cartApi from "@/api/cart.js"
	import FarmEvaluate from "../../components/foreground/FarmEvaluate.vue"
	export default {
		components: {
			FarmEvaluate
		},
		data() {
			return {
				FarmInfo: {},
				selectedIndex: null,
				showAll: false,
				isStyleChanged: false,
				count: 1,
				totalprice: 0.00,
				shoucang: {
					default: require('../../assets/images/shoucang.png'),
					hover: require('../../assets/images/shoucang2.png')
				},
			}
		},
		computed: {
			displaySpecId() {
				if (this.selectedIndex !== null) {
					let unit = this.FarmInfo.specificationBeans[this.selectedIndex].id;
					return unit
				}
			},
			displaySpecInfo() {
				if (this.selectedIndex !== null) {
					let info = this.FarmInfo.specificationBeans[this.selectedIndex];
					return info
				}
			},
			displayUnit() {
				if (this.selectedIndex !== null) {
					let unit = this.FarmInfo.specificationBeans[this.selectedIndex].znSpecUnit;
					return `元/${unit}`
				}
			},
			displayPrice() {
				if (this.selectedIndex !== null) {
					// 如果有规格被选中，则显示选中的规格价格
					return this.FarmInfo.specificationBeans[this.selectedIndex].znSpecPrice;
				} else {
					// 否则显示价格区间
					if (this.FarmInfo && this.FarmInfo.specificationBeans && this.FarmInfo.specificationBeans.length > 0) {
						if (this.FarmInfo.specificationBeans.length === 1) {
							// 若只有一条数据，则显示最高价格
							return `${this.FarmInfo.specificationBeans[0].znSpecPrice}元`;
						} else {
							// 多条数据时，计算最低和最高价格范围
							let minPrice = this.FarmInfo.specificationBeans[0].znSpecPrice;
							let maxPrice = this.FarmInfo.specificationBeans[0].znSpecPrice;

							for (let i = 1; i < this.FarmInfo.specificationBeans.length; i++) {
								const specPrice = this.FarmInfo.specificationBeans[i].znSpecPrice;
								if (specPrice < minPrice) {
									minPrice = specPrice;
								}
								if (specPrice > maxPrice) {
									maxPrice = specPrice;
								}
							}

							return `${minPrice.toFixed(2)}元 - ${maxPrice.toFixed(2)}元`;
						}
					}
				}
				return 0.00; // 默认返回空字符串
			},
			displayedSpecification() {
				if (this.FarmInfo && this.FarmInfo.specificationBeans) {
					if (this.showAll) {
						return this.FarmInfo.specificationBeans;
					} else {
						return this.FarmInfo.specificationBeans.slice(0, 3);
					}
				}
				return [];
			}
		},
		methods: {
			getMaxInventory() {
				if (this.displayedSpecification && this.selectedIndex !== null && this.displayedSpecification.length > this
					.selectedIndex) {
					return this.FarmInfo.specificationBeans[this.selectedIndex].inventory;
				}
				return 1; // 默认为1，或者根据需要设定其他默认值
			},
			BuyNow(displaySpecInfo, count, totalprice) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else if (this.selectedIndex == null) {
					this.$message.error('请选择规格');
				} else {
					this.$router.push({
						path: `/ConfirmAnOrder`
					}).catch(err => err);
					let farmData = [{
						FarmInfo: this.FarmInfo,
						SpecInfo: displaySpecInfo,
					}]
					localStorage.setItem("FarmInfo", JSON.stringify(farmData));
					localStorage.setItem("count", JSON.stringify(count));
				}

			},
			async DisInfoFarm() {
				const res = await farmApi.DisInfoFarm('/znFarmproduce/DisInfoFarm/' + this.getId());
				if (res.code === 200) {
					this.FarmInfo = res.data;
				}
			},
			async NotLogInInfoFarm() {
				const res = await farmApi.NotLogInInfoFarm('/znFarmproduce/NotLogInInfoFarm/' + this.getId());
				if (res.code === 200) {
					this.FarmInfo = res.data;
				}
			},
			getId() {
				return this.$route.params.farmId;
			},
			async Addcart(count, displaySpecId) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else if (this.selectedIndex == null) {
					this.$message.error('请选择规格');
				} else {
					let Shopcart = {
						farmId: this.FarmInfo.farmId,
						specId: displaySpecId,
						count: count,
					}
					const res = await cartApi.AddCart('/znShoppingcart/AppendCart', Shopcart);
					if (res.code == 200) {
						this.$message({
							message: "加购成功",
							type: 'success'
						});
					} else {
						this.$message.error(res.msg);
					}
				}

			},
			async postCollectFarm(collectOrNot) {
				if (this.$store.getters.gettoken == null) {
					this.$message.warning('您还未登录！');
				} else {
					let collectOrNotBean = {
						farmId: this.getId(),
						collectStatus: collectOrNot === false ? 1 : 0
					};
					const res = await farmApi.postCollectFarm("/ZnCollectFarm/postCollectFarm", collectOrNotBean);
					if (res.code == 200) {
						this.DisInfoFarm();
					}
				}

			},
			changeStyle(index) {
				this.selectedIndex = index;
				this.isStyleChanged = true;
				this.count = 1;
				this.totalprice = this.displayPrice.toFixed(2)
			},
			toggleShowAll() {
				this.showAll = true;
			},
			handleChange(displayPrice) {
				this.totalprice = (this.count * displayPrice).toFixed(2);
			}
		},
		mounted() {
			const farmId = this.getId();
		},
		created() {
			if (this.$store.getters.gettoken == null) {
				this.NotLogInInfoFarm()
			} else {
				this.DisInfoFarm();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.farm-mainBody {
		display: flex;
		flex-direction: column;

		.hover {
			color: #ff8200;
		}

		.Body {
			background: #ffffff;
			border-radius: 2px #e1e1e1;
			margin: 0 15% 0 15%;
			display: flex;
			position: relative;

			img {
				margin: 20px;
				height: 100%;
				width: 30%;
			}

			.framInfo {
				position: relative;
				margin: 0 20px;
				width: calc(100% - 40px);
				padding-bottom: 20px;

				.farmname {
					padding: 0 10px;
					font-family: PingFangSC-Medium;
					font-size: 18px;
					color: #222;
					letter-spacing: 0;
					font-weight: 600;
				}

				.updatetime {
					display: flex;
					align-items: center;
					margin-left: 10px;
					margin-right: 10px;
					padding-bottom: 18px;
					border-bottom: 1px solid #ffecea;
					margin-top: 13px;
					color: #909090;
					font-family: PingFangSC-Regular;
					font-size: 12px;
					letter-spacing: 0;
				}

				.farminfo {
					display: flex;
					align-items: center;
					width: 100%;
					margin-left: 10px;
					margin-right: 10px;
					margin-top: 19.5px;

					.line-s1 {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.line-s2 {
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #444;
						letter-spacing: 0;
					}
				}

				.sort {
					display: flex;
					align-items: center;
					width: 100%;
					margin-left: 10px;
					margin-right: 10px;
					margin-top: 19.5px;

					.line-so1 {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.line-so2 {
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #444;
						letter-spacing: 0;
					}
				}

				.price {
					margin: 19.5px 0 10px 10px;

					display: flex;

					.line-pr1 {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.line-pr2 {
						cursor: pointer;
						width: 510px;
						height: 44px;
						padding-right: 25px;
						font-family: PingFangSC-Regular;
						font-size: 24px;
						color: #ff442e;
						letter-spacing: 0;
					}
				}

				.specification {
					margin: 19.5px 0 10px 10px;
					display: flex;
					align-items: baseline;

					.line-spec {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.spec-main {
						display: flex;
						flex-direction: column;
						align-items: center;

						.spec-content {
							display: flex;
							justify-content: space-between;
							align-items: center;
							cursor: pointer;
							width: 510px;
							height: 44px;
							padding-right: 25px;
							border-bottom: 1px dashed #e1e1e1;
							font-family: PingFangSC-Regular;
							font-size: 12px;
							color: #444;
							letter-spacing: 0;
						}

						.spec-btm {
							margin-top: 15px;
							font-family: PingFangSC-Regular;
							font-size: 12px;
							color: #909090;
							letter-spacing: 0;
							cursor: pointer;
						}

						.red-border {
							border-top: 1px solid #ff442f;
							border-bottom: 1px solid #ff442f;
							color: #ff442f;
						}
					}
				}

				.purNumBer {
					margin: 19.5px 0 10px 10px;
					display: flex;
					align-items: center;

					.span-pur {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.pur-price {
						font-family: PingFangSC-Medium;
						font-size: 24px;
						color: #ff442e;
						letter-spacing: 0;
						margin-left: 34px;
					}

					.el-input-number {
						font-size: 12px;
					}
				}

				.elBtn {
					display: flex;
					align-items: center;
					width: 100%;
					margin-left: 10px;
					margin-right: 10px;
					margin-top: 20px;

					.linne-d1 {
						flex: none;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #646464;
						letter-spacing: 0;
						width: 80px;
					}

					.elbtn1 {
						display: flex;
						align-items: center;
						height: 40px;
						padding: 0 38px;
						background: #ff442f;
						font-family: PingFangSC-Regular;
						font-size: 16px;
						color: #fff;
						letter-spacing: 0;
						cursor: pointer;
						margin-right: 20px;
					}

					.tendency {
						display: flex;
						align-items: center;
						color: #909090;

						img {
							margin: 0;
							width: 30px;
						}

						span {
							font-family: PingFangSC-Regular;
							font-size: 20px;

						}
					}

				}

				.line-val {
					display: flex;
					justify-content: space-evenly;
					flex-direction: column;
					width: 100%;
					margin-left: 90px;
					margin-right: 10px;
					margin-top: 20px;

					.tips-item {
						display: flex;
						margin-bottom: 15px;

						.tips-item-t {
							color: #909090;
							font-family: Helvetica;
							font-size: 12px;
							letter-spacing: 0;
							flex: 0 0 auto;
						}

						.tips-item-v {
							font-family: Helvetica;
							font-size: 12px;
							letter-spacing: 0;
							flex: 0 0 auto;
							margin-left: 20px;
							color: #646464;
						}
					}
				}
			}
		}

		.criticism {
			margin: 0 15% 1% 15%;
		}
	}
</style>